<template>
    <div class="stepBox">
        <el-steps :active="active" finish-status="success" align-center>
            <el-step title="选择咨询师" />
            <el-step title="选择预约时间/咨询方式" />
            <el-step title="完成" />
        </el-steps>
        <div class="orderInfo" v-if="active==1">
            <ul>
                <li>
                    <p>咨询服务： <span>{{state.info.orderInfo.service}}</span></p>
                </li>
                <li>
                    <p>服务ID： <span>{{state.info.orderInfo.serviceId}}</span></p>
                </li>
                <li>
                    <p>服务咨询次数： <span>{{state.info.orderInfo.serviceNum}}次</span></p>
                </li>
                <li>
                    <p>剩余咨询次数： <span>{{state.info.orderInfo.remainderNum}}次</span></p>
                </li>
                <li>
                    <p>更换类型： <span class="radioBox">
                        <el-radio-group v-model="state.info.orderInfo.changeStyle">
                            <el-radio :label="1">自助更换（更换后，只享用剩余次数）</el-radio>
                            <br>
                            <el-radio :label="2">自转流程（更换后，继续享用全部次数）</el-radio>
                        </el-radio-group>
                        </span></p>
                </li>
                <li>
                    <p>更换后咨询次数： <span>{{state.info.orderInfo.changeNum}}次</span></p>
                </li>
                <li>
                    <p>选择咨询师： <span>
                        <el-select v-model="state.info.orderInfo.constId" class="m-2" placeholder="Select">
                            <el-option
                            v-for="item in consList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                            />
                        </el-select>
                        </span></p>
                </li>

            </ul>
        </div>
        <div class="wrapper" v-if="active==2">
            <div class="wrapperInfo">
                <div class="flex_layout">
                    <div class="u_mr_50">咨询服务：{{state.info.orderInfo.service}}</div>
                    <div class="u_mr_50">剩余咨询次数：{{state.info.orderInfo.changeNum}}</div>
                    <div class="u_mr_50">咨询师：{{state.info.orderInfo.constId}}</div>
                </div>
                <div class="flex_layout u_mt_15">
                    <div class="u_mr_50 flex_layout">
                        <div>预约时间：</div>
                        <el-input v-model="state.info.chooseTimeValue" placeholder="请选择预约时间" disabled style="width:400px"/>
                    </div>
                    <div class="u_mr_50 flex_layout">
                        <div>咨询方式：</div>
                         
                        <el-radio-group v-model="state.info.orderInfo.style">
                            <el-radio-button label="视频咨询" />
                            <el-radio-button label="语音"  disabled/>
                            <el-radio-button label="面对面" />
                        </el-radio-group>
                    </div>
                </div>
            </div>
            <div class="timeList u-color-danger textCenter u_mt_50" v-if="state.info.timeList.length == 0">该咨询师还没有排班</div>
            <div class="timeList" v-else>
                <div class="u_mb_20">选择预约时间</div>
                <div class="hscrollbarBox flex_layout">
                    <div class="leftBtn"><el-icon><DArrowLeft /></el-icon></div>
                    <div class="timeBox">
                        <el-scrollbar>
                        <ul class="flex_layout">
                            <li v-for="(item,num) in state.info.timeList" :key="item.id">
                                <h5 class="u_mb_20">{{item.date}}</h5>
                                <div class="flex_wrap div-table">
                                    <div class="div-td" :class="(state.info.nowsLi == index || state.info.nowsli2 == index ) && state.info.fthNum == num ?  'selectLi' : '' " v-for="(info,index) in item.time" :key="info" @click="chooseTime(num,index,item,info)">
                                        {{info.time}}
                                        <img v-if="(state.info.nowsLi == index || state.info.nowsli2 == index ) && state.info.fthNum == num" class="selectImg" src="../../assets/select.png" alt="">
                                    </div>
                                </div>
                            </li>
                        </ul>
                        </el-scrollbar>
                    </div>
                    <div class="rightBtn"><el-icon><DArrowRight /></el-icon></div>
                </div>
                <ul></ul>

            </div>
        </div>
        <div class="takesure"  v-if="active==3">
            <div ><el-icon size="80px" color="#13ce66"><SuccessFilled /></el-icon></div>
            <p>操作成功</p>
            <div class="u_mt_30 u_mb_20">
                <img src="../../assets/1.png" alt="" class="qr-code">
            </div>
            <div class="u_f20 u_fb u_mb_10">
                请来访者使用微信扫描上方二维码，输入验证码后在页面下方点击确认订单！
            </div>
            <div class="u_f18">注：首次下单需提醒用户支付完成后在订单中补充预约信息</div>
        </div>
        <div class="footerBtn textCenter">
            
            <el-button  type="primary" @click="next" v-if="active == 1">下一步</el-button>
            <el-button  @click="prev" v-if="active == 2">上一步</el-button>
            <el-button type="primary" @click="commit" v-if="active == 2">提交</el-button>
            <el-button  @click="back" v-if="active == 3">返回</el-button>
            <el-button type="primary" @click="detail" v-if="active == 3">详情</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ElMessage, ElMessageBox, ElScrollbar } from 'element-plus'
import { ref,reactive,computed, watch } from 'vue'
import { onBeforeRouteLeave, onBeforeRouteUpdate, useRouter } from 'vue-router';
import {useStore} from "vuex";

const store = useStore();
const router = useRouter();

const active = ref(1);

const consList = ref( [{
        name: '张三',
        time: '2022-12-01 14:56:28',
        content: '登录系统',
        id:1,
        state:0,
        times:0

      }, {
        name: '李四',
        content: '编辑用户xxx的信息',
        time: '2022-12-12 09:22:32',
        id:2,
        state:1,
        times:0
      }, {
        name: '王五',
        content: '修改咨询订单122222222',
        time: '2022-11-20 11:23:45',
        id:3,
        state:1,
        times:1
      }, {
        name: '赵六',
        content: '登录系统',
        time: '2022-12-01 14:56:28',
        id:4
      }])

const state :any = reactive({
    info:{
        orderInfo:{
            service:'公益咨询',
            serviceId: '2020',
            serviceNum: 1,
            remainderNum: 1,
            changeStyle:1,
            changeNum: 1,
            constId: 1,
            style: ''
        },
        timeList:[
            {
                date:"02月03日",
                time:[{time:'00:10 - 00:30'},{time:'00:20 - 00:30'},{time:'00:30 - 00:30'},{time:'00:40 - 00:30'},{time:'00:50 - 00:30'},
{time:'06:00 - 00:30'},{time:'00:70 - 00:30'},{time:'00:80 - 00:30'},{time:'00:90 - 00:30'}]
            },
            {
                date:"02月04日",
                time:[{time:'00:10 - 00:30'},{time:'00:20 - 00:30'},{time:'00:30 - 00:30'},{time:'00:40 - 00:30'},{time:'00:50 - 00:30'},
{time:'06:00 - 00:30'},{time:'00:70 - 00:30'},{time:'00:80 - 00:30'},{time:'00:90 - 00:30'},{time:'00:10 - 00:30'},{time:'00:20 - 00:30'},{time:'00:30 - 00:30'},{time:'00:40 - 00:30'},{time:'00:50 - 00:30'},
{time:'06:00 - 00:30'},{time:'00:70 - 00:30'},{time:'00:80 - 00:30'},{time:'00:90 - 00:30'}]
            },
            {
                date:"02月05日",
                time:[{time:'00:10 - 00:30'},{time:'00:20 - 00:30'},{time:'00:30 - 00:30'},{time:'00:40 - 00:30'},{time:'00:50 - 00:30'},
{time:'06:00 - 00:30'},{time:'00:70 - 00:30'},{time:'00:80 - 00:30'},{time:'00:90 - 00:30'}]
            }
        ],
        chooseTimeValue: '',
        fthNum:NaN,
        nowsLi: NaN,
        nowsli2: NaN,
        clickNum: 0
    }
});

const editFlag = ref(false);

const next = () => {
  if (active.value++ > 2) active.value = 0
}
const prev = () => {
    if(active.value-- <1) active.value = 1
}

const commit = () => {
    // 提交函数成功时
    if (active.value++ > 2) active.value = 0
}
const chooseTime = (num:number, index:number, item:any) => {
    if(state.info.fthNum != num){
        state.info.clickNum=0;
    }
    if ( state.info.clickNum+1 == 1) {
        state.info.fthNum = num;
        state.info.clickNum++;
        state.info.nowsli2 = index+1;
        state.info.nowsLi = index;
        state.info.chooseTimeValue = item.date +' '+  item.time[index].time + '、' + item.date +' '+ item.time[index+1].time
    }  else if ( state.info.clickNum+1 == 2) {
        if(index == 0){
            state.info.fthNum = NaN;
            state.info.clickNum = 0;
            state.info.nowsli2 = NaN;
            state.info.nowsLi = NaN;
            state.info.chooseTimeValue = ''
        }else{
            state.info.fthNum = num;
            state.info.nowsli2 = index - 1;
            state.info.clickNum++;
            state.info.nowsLi = index;
            state.info.chooseTimeValue = item.date +' '+  item.time[index-1].time + '、' + item.date +' '+ item.time[index].time
        }
        
    } else if( state.info.clickNum+1 == 3) {
        state.info.fthNum = NaN;
        state.info.clickNum = 0;
        state.info.nowsli2 = NaN;
        state.info.nowsLi = NaN;
        state.info.chooseTimeValue = ''
    } 
}
const back = () => {
    let tagsItem = {
        "component": () => import("@/views/dataMana/userMana.vue"),
            "path": "/userMana",
            "name":"userMana",
            "meta":{
                "icon": "Monitor",
                "name": "用户管理",
            },
    }
    store.dispatch("ADD_TAG", tagsItem)
    router.push({name: 'userMana'});

}
const detail = () =>{
    let tagsItem = {
        "component": () => import("@/views/orderMana/consultingOrder.vue"),
            "path": "/consultingOrder",
            "name":"consultingOrder",
            "meta":{
                "icon": "Monitor",
                "name": "咨询订单",
            },
    }
    store.dispatch("ADD_TAG", tagsItem)
    router.push({name: 'consultingOrder'});
}
const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>();

watch(state.info.orderInfo, (newVal, oldVal) => {
    editFlag.value = true
    console.log(newVal, oldVal)
})

onBeforeRouteLeave((to, from, next) => {
    if(editFlag.value){
        ElMessageBox.confirm(
        '当前页面修改数据为保存，确定离开吗?',
        '温馨提示',
        {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        }
    )
        .then(() => {
            next()
        })
        .catch(() => {
            return false;
        })
    }else{
        next()
    }
})
</script>
<style lang="scss" scoped>
.stepBox{
    margin-top: 30px;
    .orderInfo{
        width: 36%;
        margin: 50px auto;
        p{
            font-weight: 600;
            font-size: 18px;
            margin-bottom: 30px;
            span{
                font-weight: 400;
            }
            span.radioBox{
                display: inline-block;
                width: 100px;
            }
        }
    }
    .wrapper{
        width: 80%;
        margin: 50px auto;
        .wrapperInfo{
            width: 70%;
            margin: auto;
        }
        .timeList{
            width: 100%;
        }
        .hscrollbarBox{
            .leftBtn{
                width: 30px;
                height: 30px;
                border-radius: 50%;
                margin: auto 30px auto 0 ;
                line-height: 100%;
            }
            .timeBox{
                width: calc(100% - 120px);
                ul{
                    padding: 20px;
                    box-sizing: border-box;
                    li{
                        flex-shrink: 0;
                        align-items: center;
                        justify-content: center;
                        margin-right: 20px;
                        .selectLi{
                            border: 1px solid #4b96f9!important
                        }
                        .selectImg{
                            position: absolute;
                            bottom: 0;
                            right: 0;
                            width: 18px;
                            height: 17px;
                        }
                    }

                }
            }
            .rightBtn{
                
                width: 30px;
                height: 30px;
                border-radius: 50%;
                margin: auto 0 auto 30px;
                line-height: 100%;
            }
        }
    }
    .takesure{
        text-align: center;
        margin: 30px auto 15px;
        p{
            font-size: 28px;
            font-weight: bolder;
        }
        .qr-code{
            width: 250px;
            height: 250px;

        }
    }
    .footerBtn{
        margin-top: 100px;
        text-align: center;
        button{
            width: 400px;
        }
    }
}
</style>